// 公式1：1 创任务、2 src读数据、3 pipe 管道过滤数据、4 dest写数据
// 公式2: 1 下模块、2 导入模块、 3 pipe 使用模块即可
// 思考：如何替换HTML中随机的文件名
// 回答：1 打包静态资源时（css/js），保存随机名对应的原名称
// 回答：2 打包静态文件时（html），替换

// 导入模块
const gulp = require('gulp')
const uglify = require('gulp-uglify')      // 压缩，去注释
const babel = require("gulp-babel");       // JS兼容
const rev = require("gulp-rev");           // 去缓存
const revCollector = require('gulp-rev-collector')
const cssmin = require('gulp-minify-css'); // 压缩，去注释
const imagemin = require('gulp-imagemin'); // 压缩图片
const minifyhtml = require('gulp-minify-html'); // 压缩HTML

// 开发服务器配置 ==============================
// const {createProxyMiddleware:createProxyMiddleware } = require('http-proxy-middleware')
const {createProxyMiddleware } = require('http-proxy-middleware')
const server = require('browser-sync').create(); 
const watch = require('gulp-watch'); 

gulp.task('serve', () => {
  server.init({
    // server:'./src',
    server: {
      baseDir: './src',
    
      middleware: [
        // http://kg.zhaodashen.cn + /api/v1/public/login.jsp
        // 后期网站所有的请求只要是/api开头的就会被这个前端模块代理
        createProxyMiddleware('/api', { 
            target: "http://kg.zhaodashen.cn",
            changeOrigin: true, // 是否允许跨域
            secure: false,      // 关闭SSL证书验证https协议接口需要改成true
            pathRewrite: {      // 重写路径请求  
                // 移除
                '^/api' : ''
            },
        })
      ]
    },
    port: 80
  })

  
  // 监控文件修改
  watch('src/*.html', function() {
    console.log('你修改HTML文件了')
    server.reload()
  })
  watch('src/css/*.css', function() {
      console.log('你修改CSS文件了')
      server.reload()
  }) 
  watch('src/js/*.js', function() {
      console.log('你修改JS文件了')
      server.reload()
  })
})

// 打包上线配置   ===============================

// 打包HTML任务
gulp.task('html', () => {
  gulp
  // .src('src/*.html')
  .src(['temp/**/*.json', 'src/*.html'])  
  .pipe(revCollector()) 
  .pipe(minifyhtml())
  .pipe(gulp.dest('dist'))
})
// gulp.task('html', () => {
//   gulp 
//   // .src('src/*.html')
//   .src(['temp/**/*.json', 'src/*.html'])
//   .pipe( revCollector({
//       replaceReved: true,
//       dirReplacements: {
//         // src路径: dist路径
//         './js': './js',
//         './css': './css',
//       }
//   }) )
//   .pipe(minifyhtml())
//   .pipe(gulp.dest('dist'))
// })

// 打包IMG任务 
gulp.task('imgs', over => {
  gulp 
  .src('src/imgs/*.*')
  .pipe(imagemin()) 
  .pipe(gulp.dest('dist/imgs'))


  setTimeout(() => {
    over()
  }, 30000)
}) 

// 打包CSS任务
gulp.task('css', over => {
  gulp
  .src('src/css/*.css')
  .pipe(cssmin())
  .pipe(rev()) 
  .pipe(gulp.dest('dist/css'))
  // 写入JS之后，将本次的随机名保存起来
  .pipe( rev.manifest() )
  .pipe( gulp.dest( 'temp/css' ) );

  over()
})

// 打包JS任务
gulp.task('js', over => {
  gulp 
  .src('src/js/*.js')
  .pipe(babel({"presets": ["env"]}))
  .pipe(uglify())
  .pipe(rev())
  .pipe(gulp.dest('dist/js'))
  // 写入JS之后，将本次的随机名保存起来
  .pipe( rev.manifest() )
  .pipe( gulp.dest( 'temp/js' ) );

  over()
})


gulp.task('build', gulp.series('js', 'css', 'imgs', 'html', () => {
  console.log('build ok')  // 留心：js、css里面都必须over
}))

// gulp.task('a1', over => {
//   console.log('this is a1')
//   over()
// })
// gulp.task('a2', over => {
//   console.log('this is a2')
//   over()
// })
// // gulp.task('build', () => {
// //   console.log('this is build ok')
// // })
// // gulp.task（任务名，gulp.series/parallel(依赖任务，...，依赖任务，任务处理函数））
// gulp.task('build', gulp.series('a1', 'a2',  () => {
//   console.log('ok')
// }))